<template>
  <el-dialog
      title="商品审核"
      v-model="dialogVisible"
      width="800px"
      :before-close="handleClose"
      :close-on-click-modal="false"
  >
    <!-- 带边框的表单容器 -->
    <el-form
        :model="form"
        label-width="120px"
        class="audit-form"
        style="border: 1px solid #000; border-radius: 4px; padding: 20px; margin-bottom: 20px;"
    >
      <!-- 1. 基础信息行（每行2列：标签 + 值） -->
      <el-form-item label="商品ID" style="margin-bottom: 16px; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px;">
        <span>{{ form.goodsId || '无' }}</span>
      </el-form-item>
      <el-form-item label="商品名称" style="margin-bottom: 16px; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px;">
        <span>{{ form.gname || '无' }}</span>
      </el-form-item>
      <el-form-item label="商品库存" style="margin-bottom: 16px; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px;">
        <span>{{ form.stock || '无' }}</span>
      </el-form-item>
      <el-form-item label="商品原始价格" style="margin-bottom: 16px; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px;">
        <div>
          <span>市场价: {{ form.oldMarketPrice || '0' }}</span><br />
          <span>商城价: {{ form.oldShopPrice || '0' }}</span>
        </div>
      </el-form-item>
      <el-form-item label="商品调价幅度" style="margin-bottom: 16px; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px;">
        <div>
          <span>市场价: {{ form.adjustMarketPrice || '0' }}</span><br />
          <span>商城价: {{ form.adjustShoppingPrice || '0' }}</span>
        </div>
      </el-form-item>
      <el-form-item label="希望生效时间" style="margin-bottom: 16px; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px;">
        <span>{{ formatDate(form.beginTime) || '无' }}</span>
      </el-form-item>
      <el-form-item label="希望失效时间" style="margin-bottom: 16px; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px;">
        <span>{{ formatDate(form.endTime) || '无' }}</span>
      </el-form-item>
      <el-form-item label="活动情况或原因" style="margin-bottom: 16px; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px;">
        <span>{{ form.reason || '无' }}</span>
      </el-form-item>
      <el-form-item label="备注" style="margin-bottom: 16px; border-bottom: 1px solid #e8e8e8; padding-bottom: 8px;">
        <span>{{ form.remark || '无' }}</span>
      </el-form-item>

      <!-- 2. 审核意见（必填，带红色星号） -->
      <el-form-item label="审核意见" required style="margin-bottom: 0; padding-top: 16px; border-top: 1px solid #000;">
        <el-input
            type="textarea"
            v-model="form.auditOpinion"
            placeholder="请输入审核意见（如：同意调价/不同意，原因：xxx）"
            rows="4"
            style="width: 100%;"
        />
      </el-form-item>
    </el-form>

    <!-- 底部操作按钮（居中） -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="auditReject">审核不通过</el-button>
        <el-button type="primary" @click="auditApprove">审核通过</el-button>
        <el-button @click="dialogVisible = false">返回</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import api from '@/utils/request.js';

const dialogVisible = ref(false);
const form = ref({
  goodsId: '',
  gname: '',
  stock: '',
  oldMarketPrice: '',
  oldShopPrice: '',
  adjustMarketPrice: '',
  adjustShoppingPrice: '',
  beginTime: '',
  endTime: '',
  reason: '',
  remark: '',
  auditOpinion: '',
  id:""
});

const openViewDialog = (rowData) => {
  form.value = { ...rowData, auditOpinion: '' };
  dialogVisible.value = true;
};

const handleClose = () => {
  form.value.auditOpinion = '';
  dialogVisible.value = false;
};

const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
};

// 审核通过（传递 auditResult: 1）
const auditApprove = () => {
  if (!form.value.auditOpinion) {
    ElMessage.warning('请输入审核意见');
    return;
  }
  // 调用统一接口，传递审核结果和意见
  submitAudit(1); // 1 表示通过
};

// 审核不通过（传递 auditResult: 0）
const auditReject = () => {
  if (!form.value.auditOpinion) {
    ElMessage.warning('请输入审核意见');
    return;
  }
  // 调用统一接口，传递审核结果和意见
  submitAudit(0); // 0 表示不通过
};

const emit = defineEmits(['refresh-table']); // 定义可触发的事件

// 统一提交审核的方法
const submitAudit = (result) => {
  // 构造请求参数：包含商品ID、审核结果、审核意见
  const params = {
    adjustId: form.value.id, // 商品调价记录的ID（关键：用于定位审核的记录）
    checkAnswer: result, // 1=通过，0=不通过（后端根据这个字段区分逻辑）
    checkRespsonse: form.value.auditOpinion // 审核意见
  };
  console.log(params)
  // 调用统一接口（假设接口地址为 priceAdjust/audit）
  api.post('check/agreeOrDisagree', params).then(res => {
    if (res.code === 200) {
      ElMessage.success(`审核${result === 1 ? '通过' : '不通过'}成功`);
      dialogVisible.value = false;
      // 刷新父组件表格（如果需要，可通过 emit 通知父组件）
      emit('refreshTable');
    } else {
      ElMessage.error('审核失败：' + (res.msg || '系统异常'));
    }
  }).catch(err => {
    ElMessage.error('网络错误，审核失败');
  });
};

defineExpose({
  openViewDialog
});
</script>

<style scoped>
/* 表单整体样式：黑色边框 + 内边距 + 圆角 */
.audit-form {
  border: 1px solid #000;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

/* 表单项对齐：标签右对齐，内容左对齐 */
.el-form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}
.el-form-item__label {
  text-align: right !important;
  margin-right: 10px;
}

/* 底部按钮居中 */
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 15px;
}
</style>